<template>
    <div class="guidancebook">
        <template v-if="data && data.length > 0">
          <div v-if="showAllBtn" style="display: flex;justify-content: flex-end;padding-right: 10px;">
              <div
                  v-show="showCloseAndOpenBtn"
                  class="openCloseIcon"
                  @mouseenter="closeEnter"
                  @mouseleave="closeLeave"
                  @click="exptaskclose"
              >
                  <Icon type="ios-list" :size="28" style="font-weight: bold;"/>
                  <!-- <img :src="closeAll" alt="close" /> -->
                  <span>关闭</span>
              </div>
              <div
                  v-show="!showCloseAndOpenBtn"
                  class="openCloseIcon"
                  @mouseenter="openEnter"
                  @mouseleave="openLeave"
                  @click="exptaskexpand"
              >
                  <Icon type="ios-list" :size="28" style="font-weight: bold;"/>
                  <!-- <img :src="openAll" alt="open" /> -->
                  <span>展开</span>
              </div>
          </div>
          <div class="guidancebookList">
            <div class="guidancebookdiv" v-for="(value, index) in data" :key="index">
              <div
                class="guidancebooktitle"
                @click="guidancebooktitle(index,value)"
                data-name="指导书标题"
              >
                <!-- openClass -->
                <Icon :type="value.open ? 'ios-remove-circle-outline' : 'ios-add-circle-outline'" class="arrowIcon"/>
                <Tooltip
                  :content="escape2Html(value.sectionname)"
                  placement="top-start"
                  :max-width="400"
                >
                  <span v-text="value.sectionname">{{ value.sectionname }}</span>
                </Tooltip>
                <img
                  v-if="value.ischeckpoint == 1"
                  title="关键点"
                  height="16"
                  style="margin:10px 10px 10px auto;"
                  src="../../../assets/globalIcon/section-key.png"
                />
              </div>
              <div
                class="guidancebookcontent"
                data-name="指导书内容"
                style="overflow: hidden; display: block;"
              >
                <template v-if="mktype != 'markdown'">
                <div v-html="xss(value.sectiontext)"></div>
                  <template v-if="showQuestion">
                      <Divider
                          dashed
                          v-if="value.sectionQuestionList && value.sectionQuestionList.length > 0"
                      />
                      <div style="display: flex;flex-wrap:wrap;">
                          <QuestionCard
                              v-for="(item, key) in value.sectionQuestionList"
                              :key="item.questionId"
                              :question="item.questionDto"
                              :bordered="true"
                              style="width:350px;margin-right:10px;margin-bottom:10px;flex-shrink:0;"
                          ></QuestionCard>
                      </div>
                  </template>
                </template>
                <div v-else v-html="markedData(value.sectiontext)"></div>

              </div>
            </div>
          </div>
        </template>
        <template v-else>
            <NoData></NoData>
        </template>
    </div>
</template>
<script>
  import { marked } from 'marked';
    import $ from 'jquery'
    import { mapState } from 'vuex'
    import { escape2Html } from '@/libs/utils'
    import QuestionCard from '@/components/question-list/question-card.vue'
    export default {
        name:'SectionList',
        components:{QuestionCard},
        props:{
            data:{
                type:Array,
                default:() => []
            },
            showQuestion:{
                type:Boolean,
                default:true
            },
            showAllBtn:{
              type:Boolean,
              default:true
            },
            mktype:{
              type:String,
              default:''
            },
        },
        data(){
            return {
                escape2Html,
                showCloseAndOpenBtn: true,
            }
        },
        computed:{
            ...mapState('style', {
                openAll: ({ themeConfig }) => {
                    return themeConfig.guidebookSectionUnfoldAllImage;
                },
                closeAll: ({ themeConfig }) => {
                    return themeConfig.guidebookSectionFoldAllImage;
                },
                openSingle: ({ themeConfig }) => {
                    return themeConfig.guidebookSectionUnfoldOneImage;
                },
                closeSingle: ({ themeConfig }) => {
                    return themeConfig.guidebookSectionFoldOneImage;
                },
                drawerFolderImage: ({ themeConfig }) => {
                    return themeConfig.drawerFolderImage;
                }
            })
        },
        updated() {
          // $('.guidancebookList .guidancebookdiv .guidancebookcontent p').css({
          //     'line-height': 2,
          //   })
            // 调整说明指导书中图片的路径
          let imgs = $('.guidancebookList .guidancebookdiv .guidancebookcontent img')
          for(let i = 0; i < imgs.length; i++) {
            let src = $(imgs[i]).attr('src')
            $(imgs[i]).css({
              maxWidth: '100%'
            })
            if(!(src.indexOf('Learn') > -1)) {
              $(imgs[i]).attr('src', `/Learn/${src}`)
            }
          }
        },
        methods:{
            markedData(val) {
              return marked(val);
            },
            // 全部收起 全部展开
            closeEnter() {
                // this.closeIconSrc = require('@/assets/exper/close-blue.png');
            },
            openEnter() {
                // this.openIconSrc = require('@/assets/exper/open-blue.png');
            },
            closeLeave() {
                // this.closeIconSrc = require('@/assets/exper/close-grey.png');
            },
            openLeave() {
                // this.openIconSrc = require('@/assets/exper/open-grey.png');
            },
            //单个收起或展开点击事件
            guidancebooktitle(i,value){
                this.$set(value,'open',!value.open);
                let guidancebookcontent = $(".guidancebookList").find(".guidancebookcontent")[i];
                let guidancebooktitle = $(".guidancebookList").find(".arrowIcon")[i];
                if($(guidancebookcontent).is(':hidden') == true){
                    $(guidancebookcontent).slideDown('normal');
                    // $(guidancebooktitle).removeClass("bgUnfold");
                    // $(guidancebooktitle).css('background-image', `url(${this.closeSingle})`);
                }else{
                    $(guidancebookcontent).slideUp('normal');
                    // $(guidancebooktitle).addClass("bgUnfold");
                    // $(guidancebooktitle).css('background-image', `url(${this.openSingle})`);
                }
            },
            exptaskexpand(){
                this.data.forEach(item => {
                  item.open = false
                })
                let guidancebooktitle = $(".guidancebookList").find(".arrowIcon");
                let guidancebookcontent = $(".guidancebookList").find(".guidancebookcontent");
                $(guidancebookcontent).slideDown('normal');
                // $(guidancebooktitle).removeClass("bgUnfold");
                // $(guidancebooktitle).css('background-image', `url(${this.closeSingle})`);
                this.showCloseAndOpenBtn = !this.showCloseAndOpenBtn
                this.$emit('update:showCloseAndOpenBtn',this.showCloseAndOpenBtn)
            },
            exptaskclose(){
                this.data.forEach(item => {
                  item.open = true
                })
                let guidancebooktitle = $(".guidancebookList").find(".arrowIcon");
                let guidancebookcontent = $(".guidancebookList").find(".guidancebookcontent");
                $(guidancebookcontent).slideUp('normal');
                // $(guidancebooktitle).addClass("bgUnfold");
                // $(guidancebooktitle).css('background-image', `url(${this.openSingle})`);
                this.showCloseAndOpenBtn = !this.showCloseAndOpenBtn
                this.$emit('update:showCloseAndOpenBtn',this.showCloseAndOpenBtn)
            },
        }
    }
</script>
<style scoped>
.guidancebook {
  overflow: hidden;
  position: relative;
  min-height: 98px;
}
.openCloseIcon {
  cursor: pointer;
}
.openCloseIcon:hover {
  color: var(--url-color);
}
.guidancebook .guidancebookList {
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
  min-height: 98px;
  max-height: calc(100vh - 224px);
  overflow-y: auto;
}
.guidancebook .guidancebookList .guidancebookdiv {
  width: 100%;
}
.guidancebook .bgUnfold {
  width: 20px;
  height: 20px;
  /* background-size: 20px 20px; */
  /* background-image: var(--open); */
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin-bottom: -3px;
  margin-right: 10px;
}
.guidancebook .openClass {
  width: 20px;
  height: 20px;
  /* background-size: 20px 20px; */
  /* background-image: var(--close); */
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin-bottom: -3px;
  margin-right: 10px;
}
.guidancebook .guidancebookList .guidancebookdiv .guidancebooktitle {
  display: flex;
  align-items: center;
  background-color: var(--guidebook-head-bgcolor);
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  /* color: #333; */
  cursor: pointer;
  border-radius: 6px;
  word-break: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}
.guidancebook .guidancebookList .guidancebookdiv .guidancebookcontent {
  font-size: 14px;
  padding-left: 35px;
  padding-bottom: 15px;
  word-break: break-all;
  /* color:var(--default-color-level2); */
}
.guidancebookList .guidancebookcontent p {
  line-height: 2;
}
.arrowIcon{
  font-size: 24px;
  font-weight: bold;
  margin-right: 10px;
}
</style>
<style>
.guidancebookList .guidancebookcontent *:not(pre, code, [class^="ivu-tag"],[class^="ivu-divider"]) {
  word-break: break-all;
  color: var(--default-color-level2);
  background: none !important;
}
.guidancebook .guidancebookList .guidancebookdiv * {
  word-break: break-all;
}
.guidancebook .guidancebookList .guidancebookdiv pre {
  white-space: pre-wrap;
}
.guidancebook .guidancebookList .guidancebookdiv pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
  border-radius: 3px;
}
</style>
